<template>
  <div class="permission-list-container">
    <!-- 搜索区 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="权限类型" style="min-width: 180px;">
          <el-select v-model="searchForm.type" placeholder="请选择" clearable>
            <el-option label="菜单" value="1" />
            <el-option label="按钮" value="2" />
            <el-option label="接口" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="权限状态" style="min-width: 180px;">
          <el-select v-model="searchForm.status" placeholder="请选择" clearable>
            <el-option label="启用" value="1" />
            <el-option label="禁用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchpermission">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
        <el-button type="primary" @click="addpermission"><i class="el-icon-plus"></i>新增权限</el-button>
      </el-form>
    </el-card>

    <!-- 列表区 -->
    <el-card class="list-card">
      <el-table :data="permissionList" border stripe>
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="permissionName" label="权限名称" />
        <el-table-column prop="type" label="权限类型">
          <template #default="scope">
            <el-tag :type="scope.row.type === 1 ? 'success' : (scope.row.type === 2 ? 'info' : 'warning')">
              {{ scope.row.type === 1 ? '菜单' : (scope.row.type === 2 ? '按钮' : '接口') }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
              {{ scope.row.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button size="small" @click="updatepermission(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @current-change="handlePageChange"
          :current-page="pageNum"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next, total"
        />
      </div>
    </el-card>

    <el-dialog
      title="权限"
      v-model="drawerVisible"
      :width="600"
      :close-on-click-modal="false"
    >
      <el-form :model="form" label-width="80px">
        <el-form-item label="权限名称" prop="permissionName" :rules="[{ required: true, message: '请输入权限名称', trigger: 'blur' }]">
          <el-input v-model="form.permissionName" placeholder="请输入权限名称" />
        </el-form-item>
        <el-form-item label="权限编码" prop="permissionCode" :rules="[{ required: true, message: '请输入权限编码', trigger: 'blur' }]">
          <el-input v-model="form.permissionCode" placeholder="请输入权限编码" />
        </el-form-item>
        <el-form-item label="权限接口" prop="url" :rules="[{ required: true, message: '请输入权限接口', trigger: 'blur' }]">
          <el-input v-model="form.url" placeholder="请输入权限接口" />
        </el-form-item>
        <el-form-item label="类型" prop="type" :rules="[{ required: true, message: '请选择类型', trigger: 'change' }]">
          <el-select v-model="form.type" placeholder="请选择类型">
            <el-option label="菜单" value="1" />
            <el-option label="按钮" value="2" />
            <el-option label="接口" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="权限状态" prop="status" :rules="[{ required: true, message: '请选择权限状态', trigger: 'change' }]">
          <el-select v-model="form.status" placeholder="请选择权限状态">
            <el-option label="启用" value="1" />
            <el-option label="禁用" value="0" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="drawerVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getPermissions, addPermission, deletePermission, updatePermission } from '@/api/permission'
import { ElMessage } from 'element-plus'

const permissionList = ref([])
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)  // 与后端默认pageSize保持一致
const drawerVisible = ref(false)
const flag = ref(false)

// 搜索表单数据
const searchForm = reactive({
  type: null,  // 初始化为null，避免传递空字符串
  status: null
})

// 重置搜索条件
const resetSearch = () => {
  searchForm.type = null
  searchForm.status = null
  pageNum.value = 1  // 重置页码
  init()
}

// 搜索按钮点击
const fetchpermission = () => {
  pageNum.value = 1  // 搜索时重置为第一页
  init()
}

const submitForm = () => {
  if (flag.value) {
    updatePermission(form.id, {
      id: form.id,
      permissionName: form.permissionName,
      permissionCode: form.permissionCode,
      url: form.url,
      type: form.type,
      status: form.status
    }).then(response => {
      ElMessage.success("修改成功")
      init()
      drawerVisible.value = false
    })
  } else {
    addPermission({
      permissionName: form.permissionName,
      permissionCode: form.permissionCode,
      url: form.url,
      type: form.type,
      status: 0
    }).then(response => {
      ElMessage.success("添加成功")
      init()
      drawerVisible.value = false
    })
  }
}

// 处理删除
const handleDelete = (id) => {
  deletePermission(id).then(() => {
    ElMessage.success("删除成功")
    init()
  }).catch(() => {
    ElMessage.error("删除失败")
  })
}

const form = reactive({
  id: '',
  permissionName: '',
  permissionCode: '',
  url: '',
  type: '',
  status: 0
})

const addpermission = () => {
  // 清空表单
  form.id = ''
  form.permissionName = ''
  form.permissionCode = ''
  form.url = ''
  form.type = ''
  form.status = "1"
  flag.value = false
  drawerVisible.value = true
}

const updatepermission = (row) => {
  // 数据回显
  form.id = row.id
  form.permissionName = row.permissionName
  form.permissionCode = row.permissionCode
  form.url = row.url
  form.type = String(row.type)
  form.status = String(row.status)
  flag.value = true
  drawerVisible.value = true
}
// 初始化/加载数据
const init = () => {
  // 构建请求参数，只传递有值的参数
  const params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    // 仅当有值时才传递，避免传递null或空字符串
    ...(searchForm.type !== null && { type: searchForm.type }),
    ...(searchForm.status !== null && { status: searchForm.status })
  }

  getPermissions(params).then(response => {
    permissionList.value = response.data.records
    total.value = response.data.total
  })
}

// 分页切换
const handlePageChange = (page) => {
  pageNum.value = page
  init()
}

onMounted(() => {
  init()
})
</script>

<style scoped>
.list-card {
  background-color: #fff;
}

.permission-list-container {
  padding: 20px;
  background-color: #f5f7fa;
  height: 100%;
  width: 100%;
}

.pagination-container {
  margin-top: 15px;
  text-align: right;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
</style>
